import {  } from 'react-native-safe-area-context';
import * as React from 'react';
import { withSafeAreaInsets, WithSafeAreaInsetsProps, SafeAreaProvider } from 'react-native-safe-area-context';
import { View, Text } from 'react-native';

interface MyComponentOwnProps {
  message: string;
}

type MyComponentProps = MyComponentOwnProps & WithSafeAreaInsetsProps;

class MyComponent extends React.Component<MyComponentProps> {
  render() {
    const { insets, message } = this.props;
    return (
      <View style={{ paddingTop: insets.top, backgroundColor: 'red' }}>
        <Text>{message}</Text>
      </View>
    );
  }
}

export const ClassComponentWithInsets = withSafeAreaInsets<MyComponentOwnProps>(MyComponent);

  export const Element = () => {
    return (
      <SafeAreaProvider>
        <ClassComponentWithInsets message="hello word" />
      </SafeAreaProvider>
    );
}